<template>
  <div id="fileGroupView">
    <div class="form-group">
      <label>文件列表</label>
      <button @click="show = true">新建文件夹</button>
      <button @click="test">添加文件</button>
    </div>
    <fileGroupTree :file.sync="fileGroup" />

    <fileGroupViewDialog @TreeFileDialogEvent="dialogEvent" v-if="show" />
  </div>
</template>

<script lang="ts">
  // import manager from '../../../../../script/file/manager';
  import manager from '@/script/file/manager';
  import group from '@/script/file/group';
  import file from '@/script/file/file';
  import translateItem from '@/script/file/translateItem';
  import historyList from '@/script/file/history';
  import util from '@/script/util';

  import fileGroupTree from './fileGroupTree.vue';
  import fileGroupViewDialog from './fileGroupViewDialog.vue';
  import fileNewMkdir from './fileNewMkdir.vue';

  import { Vue, Prop, Component } from 'vue-property-decorator';

  @Component({
    components: {
      fileGroupTree,
      fileGroupViewDialog,
      fileNewMkdir,
    },
  })
  export default class fileGroupView extends Vue {
    fileGroup: group = new group('root');

    show: boolean = false;

    dialogEvent(code: number, data: string) {
      switch (code) {
        case 0: {
          this.show = false;
          return;
        }
        case 1: {
          this.show = true;
          return;
        }
        case 2: {
          this.newDir(data);
          return;
        }
      }
    }

    newDir(value: string) {
      let d = new group(value);
      this.fileGroup.addChild(d);
    }
    test() {
      let translateArr: translateItem[] = [];
      for (let i = 0; i < 100; i++) {
        let translate: translateItem = new translateItem(
          `Test-${i}`,
          `Test-${i}`,
          '',
          false,
          new historyList([
            `{"author":"wuming123","lastDate":"${util.getNowDate()}"}`,
          ])
        );
        translateArr.push(translate);
      }
      let test = manager.buildFile('Test-File', '', translateArr);
      this.fileGroup.addFile(test);
    }
  }
</script>

<style scoped>
  #fileGroupView {
    height: 100%;
    width: 100%;
    background-color: rgb(76, 151, 151);
    overflow: auto;
  }
  .form-group {
    display: flex;
    flex-direction: row;
    position: relative;
  }

  .form-group label {
    display: block;
    color: #fff;
    background: #1e527e;
    padding: 6px 8px;
  }
</style>
